// 大轮播图----------------------
var btopcena = document.querySelector('.btopcena')
var ulis = document.querySelectorAll('.btopcena ul li')
var olis = document.querySelectorAll('.btopcena ol li')
var leftBtn = document.querySelector('.btopcena>a.leftBtn')
var rightBtn = document.querySelector('.btopcena>a.rightBtn')

var index = 0;
var timerId;

rightBtn.onclick = function () {
    index++
    if (index === ulis.length) {
        index = 0
    }
    for (var i = 0; i < ulis.length; i++) {
        ulis[i].className = olis[i].className = ""
    }
    ulis[index].className = olis[index].className = "active"
    return false
}

leftBtn.onclick = function () {
    index--
    if (index < 0) {
        index = ulis.length - 1
    }
    for (var i = 0; i < ulis.length; i++) {
        ulis[i].className = olis[i].className = ""
    }
    ulis[index].className = olis[index].className = "active"
    return false
}

for (let j = 0; j < olis.length; j++) {
    olis[j].onmouseover = function () {
        index = j
        for (var i = 0; i < ulis.length; i++) {
            ulis[i].className = olis[i].className = ''
        }
        ulis[index].className = olis[index].className = 'active'
    }
}

timerId = setInterval(function () {
    index++
    if (index === ulis.length) {
        index = 0
    }
    for (var i = 0; i < ulis.length; i++) {
        ulis[i].className = olis[i].className = ""
    }
    ulis[index].className = olis[index].className = "active"
    return false
}, 3000)

btopcena.onmouseover = function () {
    clearInterval(timerId)
}

btopcena.onmouseout = function () {
    timerId = setInterval(function () {
        index++
        if (index === ulis.length) {
            index = 0
        }
        for (var i = 0; i < ulis.length; i++) {
            ulis[i].className = olis[i].className = ""
        }
        ulis[index].className = olis[index].className = "active"
        return false
    }, 3000)
}
// 小轮播图----------------------------------------------
var btopcenb = document.querySelector('.btopcenb')
var ulistwo = document.querySelectorAll('.btopcenb ul li')
var leftBtntwo = document.querySelector('.btopcenb>a.leftBtn')
var rightBtntwo = document.querySelector('.btopcenb>a.rightBtn')

var indextwo = 0;
var timerIdtwo;

rightBtntwo.onclick = function () {
    indextwo++
    if (indextwo === ulistwo.length) {
        indextwo = 0
    }
    for (var i = 0; i < ulistwo.length; i++) {
        ulistwo[i].className = ""
    }
    ulistwo[indextwo].className = "active"
    return false
}

leftBtntwo.onclick = function () {
    indextwo--
    if (indextwo < 0) {
        indextwo = ulistwo.length - 1
    }
    for (var i = 0; i < ulistwo.length; i++) {
        ulistwo[i].className = ""
    }
    ulistwo[indextwo].className = "active"
    return false
}

timerIdtwo = setInterval(function () {
    indextwo++
    if (indextwo === ulistwo.length) {
        indextwo = 0
    }
    for (var i = 0; i < ulistwo.length; i++) {
        ulistwo[i].className = ""
    }
    ulistwo[indextwo].className = "active"
    return false
}, 7000)

btopcenb.onmouseover = function () {
    clearInterval(timerIdtwo)
    leftBtntwo.style.display = "block"
    rightBtntwo.style.display = "block"
}

btopcenb.onmouseout = function () {
    leftBtntwo.style.display = "none"
    rightBtntwo.style.display = "none"

    timerIdtwo = setInterval(function () {
        indextwo++
        if (indextwo === ulistwo.length) {
            indextwo = 0
        }
        for (var i = 0; i < ulistwo.length; i++) {
            ulistwo[i].className = ""
        }
        ulistwo[indextwo].className = "active"
        return false
    }, 7000)
}